<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 定义模板 -->
    <div id="app">
      <h1>vue2初体验</h1>

      <p>{{msg}}</p>
      <!-- 只要使用指令,属性后面的引号就相当于变成了插值表达式 -->
      <!-- <button v-bind:disabled="flag">按钮</button>
      <button v-model:disabled="flag">按钮</button> -->
      <!-- 注意: v-model只能用来控制表单元素 -->
      <!-- <input type="text" v-bind:value="msg" />
      <input type="text" v-model:value="msg" /> -->

      <!-- 总结: v-bind和v-model的区别
        1. v-bind可以在任何标签上使用,v-model只能在表单元素上使用
        2. v-bind只能单向数据绑定. v-model可以双向数据绑定
      -->

      <!-- v-bind和v-model的简写 -->
      <!-- <input type="text" :value="msg" /> -->
      <input type="text" v-model="msg" />
    </div>
    <!-- 2. 引入vue.js -->
    <script src="./vue.js"></script>

    <!-- 3. 创建vue实例 -->
    <script>
      // 何时使用绑定数据的两个指令: v-bind和v-model
      // 答案: 要操作标签上属性的值的时候
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue',
          flag: true, //flag用来控制按钮是否禁用
        },
      })
    </script>
  </body>
</html>
